<template>
  <div class="rooms-container">
    <div class="rooms-header">
      <h1>聊天室</h1>
      <div class="header-actions">
        <el-button type="primary" @click="createRoom">创建聊天室</el-button>
        <el-button @click="refreshRooms">刷新</el-button>
      </div>
    </div>
    
    <div class="rooms-content">
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索聊天室"
          prefix-icon="el-icon-search"
          clearable
        />
      </div>
    
      <div class="rooms-list">
        <div class="room-item" v-for="room in filteredRooms" :key="room.id">
          <div class="room-avatar-placeholder"></div>
          <div class="room-info">
            <div class="room-name">{{ room.name }}</div>
            <div class="room-description">{{ room.description }}</div>
            <div class="room-meta">
              <span class="room-members">{{ room.memberCount }}人在线</span>
              <span class="room-category">{{ room.category }}</span>
            </div>
          </div>
          <div class="room-actions">
            <el-button type="primary" @click="joinRoom(room)">加入</el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 创建聊天室对话框 -->
    <el-dialog title="创建聊天室" v-model="createRoomDialogVisible" width="500px" class="dialog-bounce-effect">
      <el-form :model="newRoom" label-width="80px">
        <el-form-item label="聊天室名称">
          <el-input v-model="newRoom.name" placeholder="请输入聊天室名称"></el-input>
        </el-form-item>
        <el-form-item label="聊天室描述">
          <el-input 
            v-model="newRoom.description" 
            type="textarea" 
            placeholder="请输入聊天室描述"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="聊天室分类">
          <el-select v-model="newRoom.category" placeholder="请选择分类" style="width: 100%">
            <el-option label="技术" value="技术"></el-option>
            <el-option label="娱乐" value="娱乐"></el-option>
            <el-option label="生活" value="生活"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createRoomDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreateRoom">创建</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Rooms",
  data() {
    return {
      searchQuery: "",
      createRoomDialogVisible: false,
      newRoom: {
        name: "",
        description: "",
        category: ""
      },
      rooms: [
        {
          id: 1,
          name: "技术讨论室",
          description: "讨论各种技术问题，分享技术经验",
          memberCount: 128,
          category: "技术"
        },
        {
          id: 2,
          name: "音乐分享室",
          description: "分享好听的音乐，讨论音乐话题",
          memberCount: 85,
          category: "娱乐"
        },
        {
          id: 3,
          name: "游戏大厅",
          description: "游戏交流，组队开黑",
          memberCount: 210,
          category: "娱乐"
        },
        {
          id: 4,
          name: "读书分享会",
          description: "分享读书心得，推荐好书",
          memberCount: 65,
          category: "生活"
        },
        {
          id: 5,
          name: "美食天地",
          description: "分享美食制作方法，推荐好吃的餐厅",
          memberCount: 92,
          category: "生活"
        }
      ]
    };
  },
  computed: {
    filteredRooms() {
      if (!this.searchQuery) return this.rooms;
      return this.rooms.filter(room => 
        room.name.includes(this.searchQuery) || 
        room.description.includes(this.searchQuery) ||
        room.category.includes(this.searchQuery)
      );
    }
  },
  methods: {
    createRoom() {
      this.createRoomDialogVisible = true;
    },
    
    confirmCreateRoom() {
      if (!this.newRoom.name) {
        this.$message.warning("请输入聊天室名称");
        return;
      }
      
      if (!this.newRoom.category) {
        this.$message.warning("请选择聊天室分类");
        return;
      }
      
      // 模拟创建聊天室
      this.$message.success(`聊天室 "${this.newRoom.name}" 创建成功`);
      this.createRoomDialogVisible = false;
      
      // 重置表单
      this.newRoom = {
        name: "",
        description: "",
        category: ""
      };
    },
    
    refreshRooms() {
      this.$message.success("聊天室列表已刷新");
    },
    
    joinRoom(room) {
      this.$message.info(`已加入聊天室 "${room.name}"`);
      // 这里应该跳转到聊天室页面
    }
  }
};
</script>

<style scoped>
.rooms-container {
  padding: var(--spacing-md);
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.rooms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.rooms-header h1 {
  margin: 0;
  font-size: 24px;
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.rooms-content {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: var(--spacing-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.search-box {
  margin-bottom: var(--spacing-md);
}

.room-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin-bottom: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.room-item:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.room-avatar {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  margin-right: var(--spacing-sm);
  object-fit: cover;
}

.room-info {
  flex: 1;
}

.room-name {
  font-size: 16px;
  font-weight: var(--font-weight-primary);
  color: #333;
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.room-description {
  font-size: 14px;
  color: #666;
  margin-bottom: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.3);
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.room-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.room-members {
  background-color: rgba(102, 126, 234, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.room-category {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.room-actions {
  display: flex;
  align-items: center;
}

.room-avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  margin-right: var(--spacing-sm);
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* 移动端优化 */
@media (max-width: 767px) {
  .rooms-container {
    padding: var(--spacing-sm);
  }
  
  .rooms-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
  
  .rooms-header h1 {
    font-size: 20px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .header-actions .el-button {
    flex: 1;
    font-size: 13px;
    padding: 8px 12px;
  }
  
  .rooms-content {
    padding: var(--spacing-sm);
  }
  
  .search-box {
    margin-bottom: var(--spacing-sm);
  }
  
  .room-item {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-sm);
  }
  
  .room-avatar-placeholder {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }
  
  .room-info {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .room-name {
    font-size: 15px;
    margin-bottom: var(--spacing-xs);
  }
  
  .room-description {
    font-size: 13px;
    margin-bottom: var(--spacing-xs);
  }
  
  .room-meta {
    justify-content: flex-start;
    gap: var(--spacing-sm);
  }
  
  .room-members,
  .room-category {
    font-size: 11px;
    padding: 1px 4px;
  }
  
  .room-actions {
    align-self: flex-end;
  }
  
  .room-actions .el-button {
    font-size: 13px;
    padding: 6px 10px;
  }
}
</style>